import React, { useState, useEffect } from 'react';
import { Table, Popconfirm, message } from 'antd';
import { auths } from '../../../api/auth/data.js';
import PubSub from 'pubsub-js';
import { deleteAuth } from '../../../api/auth/index';

function Body() {
  useEffect(() => {
    PubSub.unsubscribe('authSearch');
    PubSub.subscribe('authSearch', (msg, data) => {
      let oldData = auths.concat();
      let newData = [];
      if (data['name'] === '' && data['id'] === '') {
        setIsSearch(auths);
      } else if (data['id'] === '' && data['name'] !== '') {
        newData = oldData.filter((item) => {
          return item['name'].indexOf(data['name']) !== -1;
        });
        setIsSearch(newData.concat());
      } else if (data['id'] !== '' && data['name'] === '') {
        newData = oldData.filter((item) => {
          return item['id'].indexOf(data['id']) !== -1;
        });
        setIsSearch(newData.concat());
      } else if (data['id'] !== '' && data['name'] !== '') {
        newData = oldData.filter((item) => {
          return (
            item['name'].indexOf(data['name']) !== -1 &&
            item['id'].indexOf(data['id']) !== -1
          );
        });
        setIsSearch(newData.concat());
      }
    });
    PubSub.unsubscribe('reset');
    PubSub.subscribe('reset', (msg, data) => {
      setIsSearch([]);
      setIsSearch(auths);
    });
  });
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
      width: 300,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => (text === 0 ? '未启用' : '启用'),
      filters: [
        {
          text: '启用',
          value: 1,
        },
        {
          text: '未启用',
          value: 0,
        },
      ],
      onFilter: (value, record) => record.status === value,
    },
    {
      title: '操作',
      dataIndex: 'operates',
      key: 'operates',
      fixed: 'right',
      width: 200,
      render: (_, record) => (
        <>
          <a
            href="javascript:;"
            style={{ marginRight: '10px' }}
            onClick={() => {
              PubSub.publish('showUpdate', record);
            }}
          >
            {'编辑'}
          </a>
          |
          <Popconfirm
            title="确认删除吗?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => {
              let delData = deleteAuth(record.id);
              delData.then((item) => {
                message.success(item['msg']);
                console.log(record);
              });
              setIsSearch(auths);
              console.log(auths)
            }}
          >
            <a href="javascript:;" style={{ marginLeft: '10px' }}>
              {'删除'}
            </a>
          </Popconfirm>
        </>
      ),
    },
  ];
  const [isSearch, setIsSearch] = useState(auths);
  return (
    <Table
      columns={columns}
      dataSource={isSearch}
      scroll={{ x: '120%', y: 400 }}
    />
  );
}

export default Body;
